<template>
<div>
    <div class="head-inner">
        <div class="head-black"></div>
        <div class="head-user">
            <div class="head-info clearfix">
                <div class="avatar-container">
                    <div>
                        <div class="owner-avatar" style="width: 60px;height:60px;">
                            <img class="owner-avatar-img owner-avatar-face">
                        </div>
                    </div>
                </div>
                <div class="head-basic">
                    <div>
                        <span class="head-getName">{{getHouseOwnerName}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>
    <el-tabs v-model="activeName"  class="body-tabs">
        <el-tab-pane class="body-tabs-item"  name="myHouse">
            <span slot="label"><i class="el-icon-s-home"></i> 名下房子</span>
            <div style="margin-left:1%;margin-right:1%">
                <el-row>            
                    <el-col :span="6" v-for="(item) in houseInfo" :key="item.houseId" :offset="1" >                
                        <div style="margin-top:10px">                    
                            <el-card :body-style="{ padding: '0px'}" shadow="hover" class="myHouse-card">
                                <div slot="header" class="clearfix">
                                    <span>详细信息</span>    
                                </div>     
                                <div> 
                                    <div class="img-house">
                                    </div>                                       
                                    <span  class="myHouse-card-info">房屋类型:{{item.type}}</span><br>
                                    <span  class="myHouse-card-info">房租:{{item.rent}}</span><br>
                                    <span  class="myHouse-card-info">地址:{{item.address}}</span><br>  
                                    <span  class="myHouse-card-info">当前状态:{{item.statement}}</span>                               
                                </div>                
                            </el-card>                
                        </div>            
                    </el-col>        
                </el-row> 
            </div>
        </el-tab-pane>
        <el-tab-pane class="body-tabs-item"  name="changeMyInfo" label="修改信息">
            <span slot="label"><i class="el-icon-edit"></i> 修改信息</span>
            <div class="security-right">
                <div class="user-setting-wrap">
                    <div>
                        <el-descriptions class="margin-top"  :column="3"  border>
                            <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-user"></i>
                                    姓名
                                </template>
                                {{getHouseOwnerName}}            
                            </el-descriptions-item>
                            <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-user-solid"></i>
                                住址
                            </template>
                                {{getHouseOwnerAddress}}
                            </el-descriptions-item>
                            <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-location-outline"></i>
                                空闲时间
                            </template>
                                {{getHouseOwnerFreetime}}
                            </el-descriptions-item>
                            <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-location-outline"></i>
                                联系电话
                            </template>
                                {{getHouseOwnerHphone}}
                            </el-descriptions-item>
                        </el-descriptions>        
                    </div>
                    <div style="text-align:center;margin-top:30px">
                        <el-button type="primary" icon="el-icon-edit" circle size="small" @click="dialog_visiable = true"></el-button>
                    </div>
                    <el-dialog title="修改个人信息" :visible.sync="dialog_visiable">
                        <el-form :model="form" status-icon   ref="form">
                            <el-form-item label="姓名" prop="myNewName">
                                <el-input v-model="form.myNewName" placeholder="请输入姓名"></el-input>
                            </el-form-item>
                            <el-form-item label="空闲时间" prop="freetime">
                                <el-date-picker
                                    v-model="form.freetime"
                                    type="daterange"
                                    align="right"
                                    unlink-panels
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :picker-options="pickerOptions"
                                    value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="地区选择" prop="address">
                                <v-distpicker @selected="regionSelect" ></v-distpicker>
                            </el-form-item>
                            <el-form-item >
                                <el-button type="primary" @click.native="updateMyInfo('form')">保存</el-button>
                                <el-button @click="restForm('form')">取消</el-button>
                            </el-form-item>                
                        </el-form>            
                </el-dialog>
                    <div>

                    </div>
                </div>
            </div>
        </el-tab-pane>
    </el-tabs>
    </div>
</div>

</template>
<script>
import houseOwnerCenterMyHouse from '@/api/houseowner/houseOwnerCenterMyHouse'
import VDistpicker from "v-distpicker";
export default {
    name:'houseOwnerCenter',
    components: {
        "v-distpicker":VDistpicker
    },
    data(){

        return{
            activeName:'changeMyInfo',
            name:'未知',
            myAddress:'',
            myFreetime:'',
            ifFree:'',
            myHpHone:'',
            reset:false,
            houseInfo:[],
            type:null,
            livenum:'',
            rent:'',
            address:'',
            statement:'',
            dialog_visiable:false,
            form:{
                myNewName:'',
                address:'',
                freetime:'',
                region: {
                    province: "",
                    city: "",
                    area:""
                }
            },
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },

        }
    },
    created(){
        this.showMyHouse();
        this.checkIfFree();
    },
    computed:{
        getHouseOwnerName(){
            let houseownername = localStorage.getItem('owner_name');
            this.name = houseownername
            return  this.name;
        },
        getHouseOwnerAddress(){
            let houseownername = localStorage.getItem('owner_address');
            this.myAddress = houseownername;
            return this.myAddress;
        },
        getHouseOwnerFreetime(){
            let houseownername = localStorage.getItem('owner_freetime');
            if (houseownername === '' || houseownername === null){
                this.myFreetime = '暂无'
            } else {
                this.myFreetime = houseownername;
            }
            return this.myFreetime;
        },
        getHouseOwnerHphone(){
            let houseownername = localStorage.getItem('owner_id');
            return houseownername ? houseownername : this.myHpHone;
        }
    },
    methods:{
        showMyHouse(){
            const data={
                hphone:localStorage.getItem('owner_id'),
            }
            houseOwnerCenterMyHouse.showMyHouse(data.hphone)
            .then(response => {
                this.houseInfo = response.data;
                var houseInfoList = [];
                if (this.houseInfo){
                    this.houseInfo.forEach(u=>{
                        var statement = '';
                        var type = '';
                        if (u.state === 1){
                            statement = '已租'
                        } else if (u.state === 0){
                            statement = '空闲'
                        } else if (u.state === -1){
                            statement = '维修中'
                        } else{
                            statement = '出错了!'
                        };
                        if (u.type === 1){
                            type = '单人房'
                        } else if (u.type === 2){
                            type = '套房'
                        };
                        var detail = {
                            houseId:u.id,
                            type:type,
                            rent:u.rent,
                            address:u.address,
                            statement:statement
                        }
                        houseInfoList.push(detail);
                    })
                    this.houseInfo = houseInfoList;
                }
                
            })

        },
        checkIfFree(){
            var freeTime = localStorage.getItem('owner_freetime')
            if (freeTime === '' || freeTime === null){
                this.ifFree = 0;
            } else {
                this.ifFree = 1;
            }
            if (this.ifFree === 0){
                this.$notify({
                    title: '提示',
                    position: 'top-right',
                    type:'warning',
                    duration: 1500,
                    message: '您还未设置您的空闲时间！'
                });
            }
        },
        updateMyInfo(){
            var msg = this.form.freetime
            var msg0 = '至' 
            var msg1 = msg.pop()
            var msg2 = msg.pop()
            var msg3 = msg2+msg0+msg1
            if (this.form.myNewName === ''){
                this.form.myNewName = localStorage.getItem('owner_name')
            }
            if (this.form.address === ''){
                this.form.address = this.myAddress
            }
            const data = {
                hphone:localStorage.getItem('owner_id'),
                myName:this.form.myNewName,
                address:this.form.address,
                freetime:msg3,
            }
            houseOwnerCenterMyHouse.updateMyInfo(data.hphone,data.myName,data.address,data.freetime)
            .then(response=>{
                var msg = response.status
                if (msg === 200){
                    this.$notify({
                        title: '成功',
                        message: '更新成功',
                        position: 'top-left',
                        duration: 1500,
                        type: 'success'
                    });
                    this.name = data.myName
                    this.myAddress = data.address
                    this.myFreetime = data.freetime
                    localStorage.setItem('owner_name',this.name)
                    localStorage.setItem('owner_address',this.myAddress)
                    localStorage.setItem('owner_freetime',this.myFreetime)
                    

                } else {
                    this.$notify.error({
                        title: '失败',
                        position: 'top-left',
                        duration: 1500,
                        message: '失败了'
                    });
                }
                this.form.myNewName='';
                this.form.address='';
            })
            this.dialog_visiable = false
        },
        regionSelect(data){
            var message = data.province.value+data.city.value+data.area.value
            this.form.address = message
        },
        restForm(form){
            this.$refs[form].resetFields();
            this.dialog_visiable = false;
        },

    }

}
</script>
<style scoped>
.head-inner{
    background-image: url(../../assets/img/houseOwnerHead.png);
    background-position: 50%;
    background-size: cover;
    transition: background-image .2s ease,background-size 1s ease;
    padding-top: 90px;
    position: relative;
}
.head-black{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 84px;
    background-image: url(../../assets/img/hide.png);
    background-repeat: repeat-x;
}
.head-user{
    position: relative;
    z-index: 1;
}
.head-info {
    margin-left: 20px;
    padding-bottom: 16px;
    display: flex;
    align-items: center;
}
.avatar-container{
    position: relative;
}
.owner-avatar {
    display: block;
    position: relative;
    background-image: url(../../assets/img/owner.jpg);
    background-size: cover;
    border-radius: 50%;
    margin: 0;
    padding: 0;
}
.head-basic{
    color: #fff;
    font-size: 0;
    margin-left: 22px;
}
.head-getName{
    
    display: inline-block;
    margin-right: 5px;
    font-weight: 700;
    line-height: 18px;
    font-size: 18px;
    vertical-align: middle;

}
.body-tabs{
    font-size: 18px;
}
.body-tabs-item{
    font-size: 15px;
}
.myHouse-card-info{
    margin: 20px 10px 20px 10px;
    padding: 10px;
}
.myHouse-card{
    background-color: rgb(236, 232, 172);
    min-width: 300px;
    height: 400px;
    margin-right: 20px;
    transition: all .5s;
}
.img-house{
    display: block;
    position: relative;
    background-image: url(../../assets/img/house01.jpg);
    background-size: cover;
    margin: 10px;
    padding-top: 207px;
}
.security-right{
    float: left;
    width: 100%;
    border-left: 1px solid #ddd;
    background: #fff;
}
.user-setting-warp {
    padding: 20px 20px 0;
    position: relative;
}
.inputHide>>>.input{
 border: 0;
}
</style>
